import React,{Suspense} from 'react'
import {
    BrowserRouter,
    Navigate,
    Route,
    Routes
} from 'react-router-dom'
import routes from './router'
type Props = {}
 const Sus=()=>{
        return <div>路由加载中...</div>
    }
const RouterView = (props: Props) => {
   
    const renderRoutes=(arr:any)=>{
        return arr.map((item:any,index:string)=>{
            return <Route key={index} path={item.path} element={
                item.element?<item.element />:<Navigate to={item.to} />
            }>
                {item.children&&renderRoutes(item.children)}
            </Route>
        })
    }
  return (
    <Suspense fallback={<Sus/>}>
        <BrowserRouter>
            <Routes>
                {renderRoutes(routes)}
            </Routes>
        </BrowserRouter>
    </Suspense>
)
}

export default RouterView